<template>
  <div class="payment1127">
    <Header />
    <div class="nav-outer">
      <div class="nav-1200 area1190">
        <span>首页</span> > <span>商城首页</span> > <span>订单结算</span> >
        <div class="nav-right">
          <span>售后政策</span>
          <i class="center-line"></i>
          <span>咨询客服</span>
        </div>
      </div>
    </div>
    <!-- 内容块 -->
    <div class="payment-box">
      <div class="content-box">
        <div class="title">支付方式</div>

        <div class="order-success flex ai-c">
          <img class="success-img" src="../assets/payment/success.png" alt="" />
          <div class="center-box">
            <p>恭喜您，订单提交成功</p>
            <p>
              您的订单将在支付后尽快与您取得联系，
              <span>24小时内</span>未支付的订单将自动取消
            </p>
          </div>
          <p class="right-p flex-1">应付金额：￥<span>{{order.payAmount}}</span></p>
        </div>

        <div>
          {{alipay}}
        </div>

        <div class="qr-code-box flex jc-c">
          <div id="qrCode" ref="qrCode"></div>
          <!--<img class="qr-img img-wx" src="../assets/payment/wx_rq.png" alt="" />-->
        </div>
        <div class="btn-box">
          <el-button>确认支付</el-button>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import empty from "../utils/common";
import QRCode from 'qrcodejs2'
export default {
  name: "Payment",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      form: {},
      order:{},
      alipay:'',
    };
  },
  created(){
      this.order = this.$route.query;
      if(!empty(this.order.realAmount)){
          this.order.payAmount = this.order.realAmount;
      }
      if(this.order.payType == 2){
          this.qrCodeCreate(this.order.code_url);
      }
      if(this.order.payType == 1){
          this.alipay = this.order.html;
      }

  },
 methods:{
     qrcode(url) {
         this.qrCode = new QRCode('qrCode', {
             text: url,
             width: 300,
             height: 300
         })
     },
     qrCodeCreate(url){
         // let url = 'http://39.105.4.20/#/?id=' + this.examId
         this.$nextTick(() => {
             this.qrcode(url);
         })
     }
 }
};
</script>
<!--<script>document.forms[0].submit();</script>-->
<style lang="scss">
.payment1127 {
  .payment-box {
    margin: 20px 0;
    .content-box {
      background: #fff;
      text-align: left;
    }
    .title {
      font-weight: normal;
      font-size: 20px;
      color: #565656;
      height: 70px;
      line-height: 70px;
      padding-left: 30px;
      box-sizing: border-box;
    }

    .order-success {
      width: 1076px;
      height: 112px;
      background-color: #eeeeee;
      margin: 54px auto 0;
      margin-top:0px;
      padding-left: 43px;
      .success-img {
        width: 72px;
        height: 72px;
        margin-right: 19px;
      }
      .center-box {
        p {
          height: 18px;
          font-size: 18px;
          line-height: 18px;
          color: #535353;
          margin-top: 13px;
        }
      }
      .right-p {
        height: 21px;
        font-size: 16px;
        line-height: 21px;
        color: #535353;
        text-align: right;
        padding-right: 20px;
        span {
          font-size: 24px;
          font-weight: normal;
          color: #e62222;
        }
      }
    }
    .qr-code-box {
      padding-top: 59px;
      .img-zfb {
        margin-right: 57px;
      }
    }
    .payment-type-box {
      width: 1100px;
      height: 160px;
      position: relative;
      background-color: #ffffff;
      border: solid 1px #dcdcdc;
      margin: 49px auto 0;
      .left-img {
        width: 84px;
        height: 46px;
        position: absolute;
        left: -24px;
        top: 10px;
      }
      .zfb-img,
      .wx-img {
        width: 150px;
        height: 50px;
      }
      .el-radio__inner {
        margin-top: 15px !important;
      }
    }
    .btn-box {
      padding: 60px 0;
      text-align: center;
    }
  }
}
</style>